<template>
	<div style="font-family: '微软雅黑';">
		<div class="head">
			<a @click="getBack" class="return"></a>
			考核记录
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div style="padding: 0px 10px;">
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=' '>
						<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
							<div style="position: relative;">
								<van-collapse v-model="activeName" accordion style="padding-bottom: 5px;" v-for="(item, index) in list" :key="item.id">
									<van-collapse-item :title="item.createTime | dateFormat" :name="index">
										<van-tag round type="success" style="position: absolute;right: 40px;top:12px;" color="rgb(48, 198, 148)" @click="typeIn(item.id)">查看详情</van-tag>
										<van-row style="padding-bottom: 10px;">
											<van-col span="12">目标业绩</van-col>
											<van-col span="12" style="color: rgb(133, 141, 172);text-align: right;" v-text="parseFloat(item.standardNum).toFixed(5).slice(0,-1)">123456.789</van-col>
										</van-row>
										<van-row style="padding-bottom: 10px;">
											<van-col span="12">本期业绩</van-col>
											<van-col span="12" style="color: rgb(133, 141, 172);text-align: right;" v-text="parseFloat(item.num).toFixed(5).slice(0,-1)">9999.99</van-col>
										</van-row>
										<van-row style="padding-bottom: 10px;">
											<van-col span="12">是否达标</van-col>
											<van-col span="12" style="color: rgb(48, 198, 148);text-align: right;">
												<span v-if="item.statusId == 1">达标</span>
												<span v-if="item.statusId == 2">未达标</span>
											</van-col>
										</van-row>
										<van-row style="padding-bottom: 10px;">
											<van-col span="12">释放比例</van-col>
											<van-col span="12" style="color: rgb(133, 141, 172);text-align: right;" v-text="item.releaseRatio + '%'">8%</van-col>
										</van-row>
										<van-row>
											<van-col span="12">释放数量</van-col>
											<van-col span="12" style="color: rgb(133, 141, 172);text-align: right;" v-text="parseFloat(item.releaseNum).toFixed(5).slice(0,-1)">9999.99</van-col>
										</van-row>
									</van-collapse-item>
								</van-collapse>
							</div>
						</van-list>
					</van-pull-refresh>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { superNode } from "./../utils/api";
	import { dateFormat } from 'vux';
	let _this;
	export default {
		data() {
			return {
				activeName: ['0'],
				isLoading: false,
				finished: false,
				loading: false,
				listLength: 0,
				total: 0,
				size: 10,
				current: 1,
				list: [],
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			
		},
		methods: {
			getOrderRecord() {
				this.axios.get(process.env.API_HOST + '/supper/releaseRecord/' + this.$route.query.type + '/?size=' + this.size + '&current=' + this.current).then(res => { 
					if(res.data.code == 200){
						this.list = res.data.data.records;
						this.listLength = res.data.data.records.length;
						this.total = res.data.data.total;
					}
				})
			},
			onRefresh() { // 刷新考核记录
				this.getOrderRecord();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载考核记录
				this.getOrderRecord();
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			},
			typeIn(id) { // 考核记录详情
				this.$router.push({
					name: 'SuperNodeDetailsType',
					query: {
						type: id
					}
				})
			},
			getBack() {
				this.$router.push({
					name: 'SuperNode',
				})
			}
		},
		filters: {
			dateFormat
		}
	}
</script>

<style scoped lang="less">
	.head~.overlay {
		top: 45px;
		background: #2c3145;
	}
	
	.head .return:after {
		border-color: #FFFFFF;
	}
	
	/deep/ .van-tab {
		line-height: 30px;
	}
	
	/deep/ .van-tabs__nav--card {
		margin: 0px 60px;
		border: 0;
	}
	
	/deep/ .van-tabs__nav--card .van-tab.van-tab--active {
		color: white;
		background-color: rgb(77, 89, 126);
	}
	
	/deep/ .van-tabs__nav {
		background-color: rgb(33, 38, 57);
	}
	
	/deep/ .van-tabs__nav--card .van-tab {
		color: rgb(133, 141, 172);
		border-right: 0;
	}
	
	/deep/ .van-cell {
		background: rgb(58, 64, 91);
		color: white;
	}
	
	/deep/ .van-collapse-item__content {
		background: rgb(58, 64, 91);
		color: white;
	}
	
	/deep/ .van-cell:not(:last-child)::after {
		right: 15px;
		border-color: rgb(40, 45, 65);
	}
	
	/deep/ .van-tag--round {
		border-radius: .5em;
	}
	
	/deep/ [class*=van-hairline]::after {
		border: 0;
	}
</style>